<!--
 * @Description: 电子标牌管理主页面
 * @Author:       zhengxu
 * @Date: 2021-11-02 14:00:49
 * @LastEditors:  zhengxu
 * @LastEditTime: 2021-11-11 10:03:16
-->
<template>
  <BaseOperateTable
    ref="refTable"
    :show-selection="true"
    :header="columns"
    :query-url="queryUrl"
    :delete-url="deleteUrl"
    :data-filter="dataFilter"
    @query="query"
    @operate="tableOperate"
    @reset="resetCondition">
    <template v-slot:condition>
      <div>路侧编号：
        <a-select
          v-model:value="condition.roadSideId"
          :options="roadsideIdOptions"
          :allow-clear="true"
          placeholder="请选择路侧编号"/></div>
      <div>状态：
        <a-select
          v-model:value="condition.rstatus"
          :options="RSTATUS"
          :allow-clear="true"
          placeholder="请选择状态"/></div>
      <div>电子标杆编号：
        <a-input
          v-model:value="condition.electronicSignId"
          allow-clear
          placeholder="请输入电子标杆编号"/>
      </div>
      <div>电子标牌类型：
        <a-input
          v-model:value="condition.signType"
          allow-clear
          placeholder="请输入电子标牌类型"/>
      </div>
      <div>归属部门：
        <a-input
          v-model:value="condition.companyId"
          allow-clear
          placeholder="请输入归属部门"/>
      </div>
      <div>厂商：
        <a-input
          v-model:value="condition.manufactor"
          allow-clear
          placeholder="请输入厂商"/>
      </div>
    </template>
    <!-- 工具栏 -->
    <template v-slot:operate>
      <a-button
        type="primary"
        @click="onAddClick">添加电子标牌</a-button>
      <a-button
        type="primary"
        @click="onImportClick">导入电子标牌</a-button>
      <a-button
        type="primary"
        danger
        @click="onbatchDeleteClick">删除电子标牌</a-button>
    </template>
  </BaseOperateTable>
  <!-- 数据新增/修改弹框 -->
  <BaseFormDialog
    ref="refFormDialog"
    :title="dialogTitle"
    :rules="formRules"
    :form="formFields">
    <template v-slot:coordinate="{state}">
      <a-input-group compact>
        <a-select
          v-model:value="state.coordinateType"
          style="width:34%"
          :options="COORDINATE"
          placeholder="请选择坐标系"
        />
        <a-input
          v-model:value="state.coordinate"
          style="width: 64%;marginLeft: 2%;"
          placeholder="请输入经纬度[120.0000, 30.0000]"/>
      </a-input-group>
    </template>
  </BaseFormDialog>
  <!-- 导入数据弹框 -->
  <ImportDialog
    v-if="importDialogVisible"
    v-model:visible="importDialogVisible"
    :import-url="importUrl"
    @onSuccess="onImportFileSuccess"/>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { getRoadSideList } from '@/api/roadside/roadside'
import { addElectronicSignInfo, editElectronicSignInfo } from '@/api/roadside/electronicSign'
import { COORDINATE, RSTATUS } from '@/config/roadsideCfg'
import BaseOperateTable from '@/components/BaseOperateTable.vue'
import BaseFormDialog from '@/components/BaseFormDialog.vue'
import ImportDialog from '@/components/roadside/ImportDialog.vue'
import { verifyCoordinate } from '@/utils/coordinate'
import { BasePath } from '@/api/request'
import tableFields from './tableFields'

/** 表格标题栏配置 */
const refTable = ref(null)
const columns = ref(tableFields)
// --------------------过滤数据-------------------------------
// 查询条件
const condition = reactive({
  roadSideId: undefined,
  rstatus: undefined,
  electronicSignId: undefined,
  signType: undefined,
  companyId: undefined,
  manufactor: undefined
})

const roadsideIdOptions = ref([]) // 路侧编号列表
const queryUrl = ref(`${BasePath}/electronicsign/page`) // 分页查询接口URL
const deleteUrl = ref(`${BasePath}/electronicsign/`) // 批量删除接口URL
const importUrl = ref(`${BasePath}/electronicsign/upload`) // 导入数据接口URL

/**
 * 查询所有道路编号列表
 */
async function getRoadSideAll () {
  let { data, resCode, resMsg } = await getRoadSideList()
  if (resCode === '00000') {
    roadsideIdOptions.value = (data || []).map(
      ({ roadSideId }) => ({ value: roadSideId, label: roadSideId })
    )
  } else {
    message.error(resMsg)
  }
}
/**
 *  更新服务列表数据
 * @params {Array<Object>} rows 图层组数据
 */
function dataFilter (rows) {
  return rows.map((item) => ({
    ...item,
    rsStatusName: RSTATUS.find(({ value }) => value === item.rstatus).label
  }))
}
/**
 * 重置条件
 */
const resetCondition = () => {
  condition.roadSideId = undefined
  condition.rstatus = undefined
  condition.electronicSignId = undefined
  condition.signType = undefined
  condition.companyId = undefined
  condition.manufactor = undefined
}
/**
 * 列表查询功能
 */
const query = () => {
  refTable.value.queryByCondition(condition, true)
}
// --------------------数据导入-------------------------------
const importDialogVisible = ref(false) // 导入弹框
/**
 * 点击导入数据按钮，打开弹框
 */
function onImportClick () {
  importDialogVisible.value = true
}
/**
 * 导入数据成功回调，关闭弹框，刷新列表
 */
function onImportFileSuccess () {
  importDialogVisible.value = false
  resetCondition()
  refTable.value.resetQuery()
}
// -----------------批量删除相关-------------------------------
/**
 * 批量删除按钮点击
 */
function onbatchDeleteClick () {
  refTable.value.deleteSelectedRows()
}
// --------------------数据新增/编辑-------------------------------
const refFormDialog = ref(null)
const formFields = ref(null)
const dialogTitle = ref('')
/**
 * 坐标系校验
 * 1、校验是否选择坐标类型
 * 2、校验坐标输入格式是否正确
 */
function coordinateRules (rule, value, callback) {
  if (!refFormDialog.value.getFormData().coordinateType) {
    callback(new Error('请选择坐标系类型'))
    return
  }
  if (!verifyCoordinate(value)) {
    callback(new Error('经纬度填写格式错误'))
    return
  }
  callback()
}
// 表单校验规则
const formRules = reactive({
  roadSideId: [
    { required: true, message: '选择路侧编号', trigger: 'blur' }
  ],
  electronicSignId: [
    { required: true, message: '请输入电子标杆编号', trigger: 'blur' }
  ],
  manufactor: [
    { required: true, message: '请输入厂商名称', trigger: 'blur' }
  ],
  model: [
    { required: true, message: '请输入电子标牌型号', trigger: 'blur' }
  ],
  signType: [
    { required: true, message: '请输入电子标牌类型', trigger: 'blur' }
  ],
  companyId: [
    { required: true, message: '请输入归属部门', trigger: 'blur' }
  ],
  coordinate: [
    { required: true, message: '请输入坐标' },
    { validator: coordinateRules }
  ],
  rstatus: [
    { required: true, message: '请选择电子标牌状态', trigger: 'blur', type: 'number' }
  ]
})
/**
 * 生成表单配置对象方法
 */
function setFormFields () {
  formFields.value = [
    { key: 'roadSideId', value: undefined, label: '路侧编号', type: 'select', options: roadsideIdOptions.value },
    { key: 'electronicSignName', value: undefined, label: '电子标牌名称' },
    { key: 'electronicSignId', value: undefined, label: '电子标杆编号' },
    { key: 'deviceSn', value: undefined, label: '电子标牌序列号' },
    { key: 'manufactor', value: undefined, label: '厂商' },
    { key: 'model', value: undefined, label: '型号' },
    { key: 'signType', value: undefined, label: '类型' },
    { key: 'purpose', value: undefined, label: '用途' },
    { key: 'companyId', value: undefined, label: '归属部门' },
    { key: 'coordinate', value: undefined, label: '坐标', custom: true },
    { key: 'coordinateType', value: undefined, ignore: true },
    { key: 'rstatus', value: undefined, label: '状态', type: 'select', options: RSTATUS }
  ]
}
/**
 * 新增按钮
 */
function onAddClick () {
  dialogTitle.value = '添加数据'
  let data = {}
  formFields.value.forEach(({ key, value }) => {
    data[key] = value
  })
  refFormDialog.value.setRequest(addElectronicSignInfo, () => {
    resetCondition()
    refTable.value.resetQuery()
  })
  refFormDialog.value.setFormData(data)
  refFormDialog.value.show()
}
/**
 * 编辑按钮
 */
async function tableOperate ({ eventType, data }) {
  if (eventType === 'edit') {
    dialogTitle.value = '编辑数据'
    refFormDialog.value.setRequest(editElectronicSignInfo, () => {
      refTable.value.query()
    })
    refFormDialog.value.setFormData(data)
    refFormDialog.value.show()
  }
}
// ------------------生命周期函数---------------------------------
onMounted(async () => {
  // 获取所有路侧信息
  await getRoadSideAll()
  // 根据获取的下拉信息拼接表单弹框配置
  setFormFields()
})
</script>
<script>
export default {
  name: 'electronicSign'
}
</script>
